<template>
    <div>
        <div class="bgc">

            <div class="btn">
                <el-button
                    style="font-size: 16px; padding: 10px 20px; border-radius: 0; background: #fff;color: #666; font-size: 16px;"
                    type="text" icon="el-icon-arrow-left" @click="back">返回</el-button>
                <el-button
                    style=" font-size: 16px; padding: 10px 20px;border-radius: 0; background: #08cfde;color: #000000;"
                    type="text" @click="addup">提交</el-button>
                <el-button
                    style="font-size: 16px; padding: 10px 20px; border-radius: 0; border: 1px solid #666; background: #fff;color: #666;"
                    type="text" @click="clear">清空</el-button>
            </div>


            <div class="form">
                <div>
                    <div>
                        <div>{{ PorgranList.title }}:</div>
                        <div>
                            <el-input v-model="data.title"></el-input>
                        </div>
                    </div>
                    <div>
                        <div>{{ PorgranList.left_text }}:</div>
                        <div>
                            <el-input v-model="data.left_text"></el-input>
                        </div>
                    </div>
                    <div>
                        <div>{{ PorgranList.right_text }}:</div>
                        <div>
                            <el-input v-model="data.right_text"></el-input>
                        </div>
                    </div>
                    <div>
                        <div>{{ PorgranList.industry_id }}:</div>
                        <div>
                            <el-select v-model="data.industry_id" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="plusfa">
                        <div>{{ PorgranList.img }}:</div>
                        <div class="plus">
                            <i class="el-icon-plus" @click="uploadImage" v-if="!data.img"></i>
                            <img @click="uploadImage" :src="data.img" alt="" v-else>
                            <input type="file" id="imageUploadInput" style="display: none;" accept="image/*"
                                :multiple="false" @change="handleFileSelect" />
                        </div>
                    </div>
                </div>
                <div>
                    <div>{{ PorgranList.article }}:</div>
                    <div class="editor">
                        <div style="border: 1px solid #ccc; z-index: 9;">
                            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                                :mode="mode" />
                            <Editor style="height: 400px; overflow-y: hidden;" v-model="data.article"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated"
                                @customPaste="customPaste" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { updateFile } from '@/api/status'
import { addArticle, getArticleInfo, updateArticle } from '@/api/Article'
import { getIndustryListByType } from "@/api/Industry"//查询父级ID


export default {
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            toolbarConfig: {},
            editorConfig: {
                placeholder: "请输入内容...",
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    uploadImage: {
                        customUpload: this.updata
                    },
                    uploadVideo: {
                        customUpload: this.upvideo
                    }
                },
            },
            mode: 'default', // or 'simple'
            PorgranList: {
                title: "文章标题",
                left_text: "左侧文字",
                right_text: "右侧文字",
                img: "图片",
                industry_id: "所属类目",
                article: "详情"
            },
            data: {
                title: "",
                left_text: "",
                right_text: "",
                img: "",
                industry_id: null,
                article: ""
            },
            options: []
        }
    },
    created() {
        // this.toolbarConfig.excludeKeys = [
        //     "fullScreen" // 排除菜单组，写菜单组 key 的值即可
        // ]
        if (this.$store.state.listpageid) {
            this.getinfo()
            this.getIndustry()
        } else {
            this.getIndustry()
        }
        // this.getinfo()
        // this.getIndustry()
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    methods: {
        getIndustry() {
            getIndustryListByType(2).then(res => {
                this.options = res.data.data.map(item => {
                    return {
                        value: item.id,
                        label: item.title
                    }
                })
                this.options.unshift({
                    value: 0,
                    label: "无"
                })
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        customPaste(editor, event, callback) {
            const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
            // 自定义插入内容
            editor.insertText(text)
            event.preventDefault()
            callback(true) // 返回值（注意，vue 事件的返回值，不能用 return）
        },
        updata(file, insertFn) {
            // file 即选中的文件
            // 自己实现上传，并得到图片 url alt href
            if (file) {
                const formData = new FormData();
                formData.append('token', this.$store.state.token)
                formData.append('file', file);
                updateFile(formData).then(res => {
                    insertFn(res.data.data)
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
                // 发送上传请求给服务器...
            }
        },
        upvideo(file, insertFn) {
            // file 即选中的文件
            // 自己实现上传，并得到视频 url alt href
            if (file) {
                const formData = new FormData();
                formData.append('token', this.$store.state.token)
                formData.append('file', file);
                updateFile(formData).then(res => {
                    insertFn(res.data.data)
                })
                // 发送上传请求给服务器...
            }
        },
        uploadImage() {
            const input = document.getElementById('imageUploadInput');
            input.click(); // 触发文件上传输入框的点击事件
        },
        handleFileSelect(event) {
            const file = event.target.files[0] // 获取用户选择的文件

            if (file) {
                const formData = new FormData();
                formData.append('token', this.$store.state.token)
                formData.append('file', file);
                updateFile(formData).then(res => {
                    this.data.img = res.data.data
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
                // 发送上传请求给服务器...
            }
        },
        back() {
            this.clear()
            this.$store.state.listpageid = null
            this.$store.state.listpage = true
        },
        addup() {
            if (this.$store.state.listpageid) {
                // 编辑
                console.log(this.data, 852);
                updateArticle(this.data).then(() => {
                    this.$message({
                        type: 'success',
                        message: '编辑成功!'
                    });
                    this.$store.state.listpage = true
                    this.$store.state.listpageid = null
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            } else {
                // 添加
                addArticle(this.data).then(() => {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.$store.state.listpage = true
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            }

        },
        // 获取详情信息
        getinfo() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            loading
            getArticleInfo(this.$store.state.listpageid).then(res => {
                console.log(res, 666879);
                const data = res.data.data
                this.data = {
                    ...data
                }
                loading.close();
            }).catch(() => {
                loading.close();
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })
        },
        clear() {
            this.data = {
                title: "",
                left_text: "",
                right_text: "",
                img: "",
                industry_id: null,
                article: ""
            }
        }
    }
}
</script>
<style scoped lang="less">
.bgc {
    // width: 100%;
    background-color: #fff;
    padding: 50px;

    .btn>button:nth-child(1) {
        color: #666;
        position: absolute;
        left: 30px;
        top: 90px;
        font-size: 20px;
    }

    .btn>button:nth-child(2) {
        color: #666;
        position: absolute;
        right: 160px;
        top: 90px;
        font-size: 20px;
    }

    .btn>button:nth-child(3) {
        color: #666;
        position: absolute;
        right: 80px;
        top: 90px;
        font-size: 20px;
    }

    .form {
        display: flex;
    }

    .form>div:nth-child(2) {
        width: 60%;
        margin-top: 20px;
    }

    .form>div:nth-child(2)>div:nth-child(1) {
        line-height: 40px;
        font-size: 20px;
    }

    .form>div:nth-child(1)>div>div:nth-child(1) {
        line-height: 40px;
        font-size: 20px;
        margin-right: 18px;
    }

    .form>div:nth-child(1)>div>div:nth-child(2) {
        width: 80%;
    }

    .form>div:nth-child(1) {
        // display: flex;
        margin-top: 20px;
        width: 550px;
    }
}

.bgc>.form>div:nth-child(1)>.plusfa>.plus {
    width: 100px;
    height: 100px;
    background-color: #f8f8f8;
    border-radius: 5px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    font-weight: 700;

    img {
        width: 100%;
        height: 100%;
        border-radius: 5px;

    }

    img:hover {
        cursor: pointer;
    }
}

// 富文本编译器部分
/*
  *  以下样式由于全局reset文件被覆盖，所以需要重新定义
  */
.editor {

    ::v-deep h5,
    .h5 {
        font-size: 14px;
    }

    ::v-deep h4,
    .h4 {
        font-size: 16px;
        font-weight: bold;
    }

    ::v-deep h3,
    .h3 {
        font-size: 18px;
        font-weight: bold;
    }

    ::v-deep h2,
    .h2 {
        font-size: 20px;
        font-weight: bold;
    }

    ::v-deep h1,
    .h1 {
        font-size: 22px;
        font-weight: bold;
    }

    ::v-deep i,
    ::v-deep i {
        font-style: italic !important;
    }

    ::v-deep .w-e-toolbar .w-e-menu i {
        font-style: italic;
    }
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>